<template>
  <baidu-map
    id="test"
    :scroll-wheel-zoom="true"
    class="map"
    :center="location"
    :zoom="zoom"
    @ready="handler"
    @load="load"
  >
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    <div @click="click()">11111111</div>
  </baidu-map>
</template>
  <script>
import { getAction } from '@/api/manage'
import { countColumn } from 'codemirror'
export default {
  data() {
    return {
      location: { lng: 0, lat: 0 },
      zoom: 0,
      map: {},
      BMap: {},
      content: '',
      enterpriseList: [],
      opts: {
        min_width: 250, // 信息窗口zuixiao宽度
        min_height: 80, // 信息窗口高度
        title: '详细信息', // 信息窗口标题
        enableMessage: true, //设置允许信息窗发送短息
      },
    }
  },
  created() {
    this.getEnterpriseList()
  },

  methods: {
    click() {},
    //获取当前位置回调
    locationSuccess(point, AddressComponent, marker) {
      console.log(point)
      this.location.lat = point.coords.latitude
      this.location.lng = point.coords.longitude
    },
    handler({ BMap, map }) {
      this.BMap = BMap
      this.map = map
      this.zoom = 15
      this.getNowLocation()
      this.getEnterpriseList({ BMap, map })
    },
    locationError(error) {
      switch (error.code) {
        case error.TIMEOUT:
          alert('连接超时，请重试')
          break
        case error.POSITION_UNAVAILABLE:
          alert('非常抱歉，我们暂时无法为您所在的星球提供位置服务')
          break
        case error.PERMISSION_DENIED:
          alert('您拒绝了使用位置共享服务，查询已取消')
          break
        default:
          alert('发生未知错误!')
          break
      }
    },
    //获取企业列表
    getEnterpriseList({ BMap, map }) {
      getAction('/modules/zzzsRecordEnterprise/list').then((res) => {
        for (let i = 0; i < res.result.length; i++) {
          let address = res.result[i].corporateAddress.split(',')
          console.log(address)
          var marker = new BMap.Marker(new BMap.Point(Number(address[0]), Number(address[1])))
          console.log(marker)
          var opts = {
            min_width: 250, // 信息窗口zuixiao宽度
            min_height: 80, // 信息窗口高度
            title: '详细信息:', // 信息窗口标题
            enableMessage: true, //设置允许信息窗发送短息
          }
          var content = `企业名称:${res.result[i].corporateName}<br />企业联系人:${res.result[i].corporateContacts}<br />联系电话:${res.result[i].contactNumber}`
          // 创建标注
          this.map.addOverlay(marker)
          addClickHandler(content, marker)
        }
        function addClickHandler(content, marker) {
          marker.addEventListener('click', function (e) {
            openInfo(content, e)
          })
        }
        function openInfo(content, e) {
          var p = e.target
          var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat)
          var infoWindow = new BMap.InfoWindow(content, opts) // 创建信息窗口对象
          map.openInfoWindow(infoWindow, point) //开启信息窗口
        }
      })

      console.log(2)
    },

    getNowLocation() {
      console.log(1)
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(this.locationSuccess, this.locationError, {
          // 指示浏览器获取高精度的位置，默认为false
          enableHighAccuracy: true,
          // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
          timeout: 5000,
          // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
          maximumAge: 3000,
        })
      } else {
        alert('浏览器不支持Html5来获取地理位置信息')
      }
    },
  },
}
</script>
    <style>
#test {
  height: 98vh;
  width: 100%;
  background-color: rgb(192, 228, 127);
}
.bm-view {
  width: 80%;
  height: 80%;
}
</style>